<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #dragzone {
            position: absolute;
            left: 5px;
            top: 40px;
            padding: 10px;
            width: 120px;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            background: rgba(255, 255, 55, 0.8);
            border: 1px dashed #999;
        }

        #panel {
            position: absolute;
            left: 5px;
            top: 5px;
            font-size: 12px;
        }


        #legend {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

    </style>
</head>
<body>

    <div id="map"></div>
    <div id="dragzone">数据csv文件拖放到此</div>
    <div id="legend">
    </div>
    <div id="panel">
        <input type="text" id="keyword" value="北京市,河北省,天津市" />
        <input type="button" value="查看边界" id="boundaryBtn" />
        <input type="button" value="切换底图" id="switchMap" />
        级别:<span id="zoom"></span>
        <div><a href="data/editor.csv">示例csv下载</a></div>
    </div>

    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>
    <script type="text/javascript" src="js/dat.gui.min.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var pt = new BMap.Point(127.733142,21.226515);
        var jiuduanwidth = 408;
        var jiuduanheight  = 563;
        var scale = 4.5;
        var myIcon = new BMap.Icon("./images/nanhai.png", new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale), {
            imageSize: new BMap.Size(jiuduanwidth / scale, jiuduanheight / scale)
        });
        var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
        map.addOverlay(marker2);

        function setNullStyle() {
            map.setMapStyle({
                styleJson: [
              {
                        "featureType": "all",
                        "elementType": "all",
                        "stylers": {
                                  "visibility": "off"
                        }
              }
            ]
            });
            map.getContainer().style.background = '#fff';
        }
        function setGrayStyle() {
            map.setMapStyle({
                styleJson: [
                    {
                        "featureType": "all",
                        "elementType": "all",
                        "stylers": {
                            "lightness": 61,
                            "saturation": -100
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels",
                        "stylers": {
                                  "visibility": "off"
                        }
                    }
                ]
            });
        }
        function setSubwayStyle() {
            map.setMapStyle({
                styleJson: [
          {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                            "lightness": 61,
                            "saturation": -100
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                              "color": "#666666",
                              "weight": "0.6",
                              "lightness": 18,
                              "saturation": -9,
                              "visibility": "on"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "labels.text.fill",
                    "stylers": {
                              "color": "#0000ff",
                              "weight": "4.2",
                              "lightness": -3,
                              "saturation": 100,
                              "visibility": "on"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                              "color": "#ffffff",
                              "visibility": "on"
                    }
          }
        ]
            });
        }
        function setDarkStyle() {
            map.setMapStyle({
                styleJson: [{
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                        color: '#044161'
                    }
                }, {
                    featureType: 'land',
                    elementType: 'all',
                    stylers: {
                        color: '#091934'
                    }
                }, {
                    featureType: 'boundary',
                    elementType: 'geometry',
                    stylers: {
                        color: '#064f85'
                    }
                }, {
                    featureType: 'railway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'highway',
                    elementType: 'geometry',
                    stylers: {
                        color: '#004981'
                    }
                }, {
                    featureType: 'highway',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#005b96',
                        lightness: 1
                    }
                }, {
                    featureType: 'highway',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'on'
                    }
                }, {
                    featureType: 'arterial',
                    elementType: 'geometry',
                    stylers: {
                        color: '#004981',
                        lightness: -39
                    }
                }, {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#00508b'
                    }
                }, {
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'green',
                    elementType: 'all',
                    stylers: {
                        color: '#056197',
                        visibility: 'off'
                    }
                }, {
                    featureType: 'subway',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'local',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'arterial',
                    elementType: 'labels',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'boundary',
                    elementType: 'geometry.fill',
                    stylers: {
                        color: '#029fd4'
                    }
                }, {
                    featureType: 'building',
                    elementType: 'all',
                    stylers: {
                        color: '#1a5787'
                    }
                }, {
                    featureType: 'label',
                    elementType: 'all',
                    stylers: {
                        visibility: 'off'
                    }
                }, {
                    featureType: 'poi',
                    elementType: 'labels.text.fill',
                    stylers: {
                        color: '#ffffff'
                    }
                }, {
                    featureType: 'poi',
                    elementType: 'labels.text.stroke',
                    stylers: {
                        color: '#1e1c1c'
                    }
                },
                {
                    "featureType": "all",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
                }
                ]
            });
        }
        function setDarkBlueStyle() {
            map.setMapStyle({
                styleJson: [
                  {
                       "featureType": "water",
                       "elementType": "all",
                       "stylers": {
                            "color": "#044161"
                       }
                  },
                  {
                       "featureType": "land",
                       "elementType": "all",
                       "stylers": {
                            "color": "#004981"
                       }
                  },
                  {
                       "featureType": "boundary",
                       "elementType": "geometry",
                       "stylers": {
                            "color": "#064f85"
                       }
                  },
                  {
                       "featureType": "railway",
                       "elementType": "all",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "highway",
                       "elementType": "geometry",
                       "stylers": {
                            "color": "#004981"
                       }
                  },
                  {
                       "featureType": "highway",
                       "elementType": "geometry.fill",
                       "stylers": {
                            "color": "#005b96",
                            "lightness": 1
                       }
                  },
                  {
                       "featureType": "highway",
                       "elementType": "labels",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "arterial",
                       "elementType": "geometry",
                       "stylers": {
                            "color": "#004981"
                       }
                  },
                  {
                       "featureType": "arterial",
                       "elementType": "geometry.fill",
                       "stylers": {
                            "color": "#00508b"
                       }
                  },
                  {
                       "featureType": "poi",
                       "elementType": "all",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "green",
                       "elementType": "all",
                       "stylers": {
                            "color": "#056197",
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "subway",
                       "elementType": "all",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "manmade",
                       "elementType": "all",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "local",
                       "elementType": "all",
                       "stylers": {
                           "color": "#115d97",
                           "visibility": "on"
                       }
                  },
                  {
                       "featureType": "arterial",
                       "elementType": "labels",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                       "featureType": "boundary",
                       "elementType": "geometry.fill",
                       "stylers": {
                            "color": "#029fd4"
                       }
                  },
                  {
                       "featureType": "building",
                       "elementType": "all",
                       "stylers": {
                            "color": "#1a5787"
                       }
                  },
                  {
                       "featureType": "label",
                       "elementType": "all",
                       "stylers": {
                            "visibility": "off"
                       }
                  },
                  {
                        "featureType": "local",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                  }
            ]
            });
        }
        setNullStyle();
        

        var chinaLayer = null;
        $.get('data/china.json', function(geojson) {

            var dataSet = mapv.geojson.getDataSet(geojson);

            var options = {
                fillStyle: 'rgba(218, 218, 218, 1)',
                //fillStyle: '#1495ff',
                //fillStyle: 'lightblue',
                //fillStyle: 'rgba(50, 50, 50, 0.5)',
                //strokeStyle: '#999',
                strokeStyle: 'rgba(255, 255, 255, 1)',
                lineWidth: 1,
                zIndex: -2,
                paneName: 'mapPane',
                draw: 'simple'
            }

            chinaLayer = new mapv.baiduMapLayer(map, dataSet, options);

        });

        

        var mapvLayers = [];

        function finished() {
            if (mapvLayers.length > 0) {
                if (options.splitListText) {
                    options.splitList = JSON.parse(options.splitListText);
                }

                var mapvLayer = mapvLayers[mapvLayers.length - 1];
                mapvLayers[mapvLayers.length - 1].update({
                    options: options 
                });

                var legend = mapvLayer.getLegend();
                $('#legend').html('');
                $('#legend').append(legend);
            }
        };

        window.onload = function() {
            initGui();
        };

        var gradientOptions = [
            { 
                0.25: "rgba(0, 0, 255, 1)",
                0.55: "rgba(0, 255, 0, 1)",
                0.85: "rgba(255, 255, 0, 1)",
                1.0: "rgba(255, 0, 0, 1)"
            },
            {
              '0': 'Black',
              '0.5': 'Aqua',
              '1': 'White'
            },
            {
                '0.0': 'blue',
                '1': 'red'
            },
            {
                '0.0': 'rgb(0, 0, 0)',
                '0.6': 'rgb(24, 53, 103)',
                '0.75': 'rgb(46, 100, 158)',
                '0.9': 'rgb(23, 173, 203)',
                '1.0': 'rgb(0, 250, 250)'
            },
            {
                '0': 'Navy',
                '0.25': 'Blue',
                '0.5': 'Green',
                '0.75': 'Yellow',
                '1': 'Red'
            },
            {
                '0': 'Black',
                '0.33': 'DarkRed',
                '0.66': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Black',
                '0.4': 'Purple',
                '0.6': 'Red',
                '0.8': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Red',
                '0.66': 'Yellow',
                '1': 'White'
            },
            {
                '0': 'Navy', '0.25': 'Navy',
                '0.26': 'Green',
                '0.5': 'Green',
                '0.51': 'Yellow',
                '0.75': 'Yellow',
                '0.76': 'Red',
                '1': 'Red'
            },
            {
                '0.00': 'rgb(255,0,255)',
                '0.25': 'rgb(0,0,255)',
                '0.50': 'rgb(0,255,0)',
                '0.75': 'rgb(255,255,0)',
                '1.00': 'rgb(255,0,0)'
            },
            { 
                0: "yellow",
                1.0: "red"
            },
            { 
                0: "white",
                1.0: "blue"
            },
            { 
                0: "green",
                1.0: "rgb(0, 255, 255)"
            }
        ];

        var gui;
        var options = {
                    draw: 'simple',
                    max: 100,
                    coordType: 'bd09ll',
                    size: 7,
                    symbol: 'circle',
                    zIndex: 1,
                    maxSize: 50,
                    maxOpacity: 0.8,
                    globalAlpha: 0.9,
                    lineWidth: 0,
                    unit: 'px',
                    //color: ['#f70000', '#299663', '#4053db', '#a2408d', 'blue'],
                    color: ['red', 'yellow', 'rgb(0, 250, 0)', 'rgb(0, 255, 255)', 'rgb(0, 50, 255)'],
                    splitListText: '{"1": "red", "2": "yellow", "3": "rgb(0, 250, 0)"}',
                    splitList: { 
                        1: 'rgb(0, 250, 0)',
                        2: 'yellow',
                        3: 'red'
                    },
                    gradient: { 
                        0.25: "rgba(0, 0, 255, 1)",
                        0.55: "rgba(0, 255, 0, 1)",
                        0.85: "rgba(255, 255, 0, 1)",
                        1.0: "rgba(255, 0, 0, 1)"
                    },
                    fillStyle: 'rgba(256, 50, 50, 0.8)',
                    strokeStyle: 'rgba(55, 50, 250, 0.6)',
                    // shadowColor: 'rgba(55, 50, 250, 0.5)',
                    // shadowBlur: 10
                }

        function initGui() {
            gui && gui.destroy();

            gui = new dat.GUI({
                nameMap: {
                    draw: '绘制方法',
                    unit: '单位',
                    size: '大小',
                    fillStyle: '颜色',
                    symbol: '形状',
                    globalAlpha: '图层透明度',
                    maxOpacity: '图层透明度',
                    // shadowColor: '阴影颜色',
                    // shadowBlur: '阴影大小',
                    gradient: '渐变色',
                    lineWidth: '线宽',
                    strokeStyle: '线颜色',
                    maxSize: '最大半径值',
                    max: '最大阈值',
                }
            });

            gui.add(options, 'draw', {
                '普通': 'simple', 
                '热力图': 'heatmap',
                '气泡': 'bubble',
                '颜色分类': 'category',
                '蜂窝状聚类': 'honeycomb',
                '网格聚类': 'grid',
                '值区间分类': 'choropleth',
                '颜色渐变': 'intensity'
            }).onFinishChange(function () {
                initGui();
                finished();
            });

            gui.add(options, 'unit', {
                '像素': 'px',
                '米': 'm'
            }).onFinishChange(function () {
                initGui();
                finished();
            });

            if (options.draw !== 'bubble') {

                if (options.unit == 'm') {
                    gui.add(options, 'size', 0.1, 200000).onFinishChange(finished);
                } else {
                    gui.add(options, 'size', 0.1, 100).onFinishChange(finished);
                }

            }

            if (options.draw !== 'heatmap') {
                gui.add(options, 'globalAlpha', 0, 1).onFinishChange(finished);
            }

            gui.add(options, 'coordType', {
                '经纬度': 'bd09ll', 
                '墨卡托': 'bd09mc',
            }).onFinishChange(function () {
                finished();
            });

            switch (options.draw) {
                case 'simple':
                    gui.addColor(options, 'fillStyle').onChange(finished);
                    // gui.addColor(options, 'shadowColor').onChange(finished);
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.add(options, 'symbol', {
                        '圆形': 'circle',
                        '矩形': 'rect',
                    }).onFinishChange(finished);
                    break;
                case 'bubble':
                    gui.addColor(options, 'fillStyle').onChange(finished);
                    // gui.addColor(options, 'shadowColor').onChange(finished);
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.add(options, 'max', 1, 1000).onFinishChange(finished);
                    gui.add(options, 'maxSize', 35, 100).onFinishChange(finished);
                    break;
                case 'category':
                    gui.add(options, 'splitListText').onFinishChange(finished);
                    break;
                case 'heatmap':
                    // gui.add(options, 'shadowBlur', 1, 100).onFinishChange(finished);
                    gui.add(options, 'max', 1, 1000).onFinishChange(finished);
                    gui.add(options, 'maxOpacity', 0, 1).onFinishChange(finished);
                    gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
                    break;
                case 'grid':
                case 'intensity':
                case 'honeycomb':
                    gui.add(options, 'max', 1, 1000).onFinishChange(finished);
                    gui.add(options, 'lineWidth', 1, 10).onFinishChange(finished);
                    gui.addColor(options, 'strokeStyle').onChange(finished);
                    gui.addGradient(options, 'gradient', gradientOptions).onFinishChange(finished);
                    break;
            }
            
        }

    function dragHandle(event) {
        var info = "",
            files, i, len;
        event.preventDefault();
        if(event.type == "drop") {
            files = event.dataTransfer.files;
            var fr = new FileReader() ;

            fr.readAsText(files[0]);

            fr.onload = function() {
                var rs = this.result;
                var data = [];
                var dataSet = new mapv.DataSet(data);

                var mapvLayer = new mapv.baiduMapLayer(map, dataSet, $.extend({}, options));
                mapvLayers.push(mapvLayer);


                if (rs[0] == '[' && rs[rs.length - 1] == ']') {
                    rs = JSON.parse(rs);
                    rs = rs.map(function (item) {
                        return {
                            geometry: {
                                type: 'Point',
                                coordinates: [item.x, item.y]
                            }
                        }
                    });
                    dataSet.set(rs);
                } else if (/city1|city2|lng1|lng2|lat1|lat2/.exec(rs)) {
                    var newDataSet = mapv.csv.getDataSet(rs);
                    var pointData = [];
                    newDataSet.initGeometry(function (a) {
                        if (a.city1) {
                            var cityCenter = mapv.utilCityCenter.getCenterByCityName(a.city1);
                            if (cityCenter) {
                                a.lng1 = cityCenter.lng;
                                a.lat1 = cityCenter.lat;
                            }
                        }

                        if (a.city2) {
                            var cityCenter = mapv.utilCityCenter.getCenterByCityName(a.city2);
                            if (cityCenter) {
                                a.lng2 = cityCenter.lng;
                                a.lat2 = cityCenter.lat;
                            }
                        }

                        if (!(a.lng1 && a.lat1 && a.lng2 && a.lat2)) {
                            return;
                        }

                        pointData.push({
                            text: a.city1,
                            geometry: {
                                type: 'Point',
                                coordinates: [a.lng1, a.lat1]
                            }
                        });

                        pointData.push({
                            text: a.city2,
                            geometry: {
                                type: 'Point',
                                coordinates: [a.lng2, a.lat2]
                            }
                        });

                        return { 
                            type: 'LineString', 
                            coordinates: [[a.lng1, a.lat1], [a.lng2, a.lat2]]
                        }
                    });

                    var intensity = new mapv.utilDataRangeIntensity({
                        maxSize: 20,
                        minSize: 1,
                        max: newDataSet.getMax('count'),
                        min: newDataSet.getMin('count'),
                    });

                    dataSet.set(newDataSet.get().filter(function(item) {
                        item.lineWidth = intensity.getSize(item.count);
                        return item.geometry;
                    }));
                        console.log(dataSet.get());

                    var option = {
                        fillStyle: 'rgba(252, 53, 58, 1)',
                        zIndex: 2,
                        size: 3,
                        draw: 'simple'
                    }

                    new mapv.baiduMapLayer(map, new mapv.DataSet(pointData), option);

                    var option = {
                        fillStyle: 'rgba(252, 53, 58, 1)',
                        font: '12px Arial',
                        avoid: true,
                        zIndex: 2,
                        size: 12,
                        draw: 'text'
                    }
                    new mapv.baiduMapLayer(map, new mapv.DataSet(pointData), option);
                } else if (/path/.exec(rs)) {
                    var newDataSet = mapv.csv.getDataSet(rs);
                    newDataSet.initGeometry(function(item) {
                        var coordinates = [];
                        var path = item.path.split(',');
                        for (var i = 0; i < path.length; i += 2) {
                            coordinates.push([path[i], path[i + 1]]);
                        }
                        return {
                            type: 'Polygon', 
                            coordinates: [coordinates]
                        }
                    });
                    dataSet.set(newDataSet.get());
                } else {
                    var newDataSet = mapv.csv.getDataSet(rs);
                    newDataSet.initGeometry();
                    dataSet.set(newDataSet.get());
                }
            }
        }
    }

    var dropTargetEle = document.getElementById("dragzone");
    dropTargetEle.addEventListener("dragenter", dragHandle, false);
    dropTargetEle.addEventListener("dragover", dragHandle, false);
    dropTargetEle.addEventListener("drop", dragHandle, false);

    $('#boundaryBtn').bind('click', function () {
        var val = $("#keyword").val().split(',');
        for (var i= 0; i < val.length; i++) {
            getBoundary(val[i]);
        }
    });

    function getBoundary(city){       
        var bdary = new BMap.Boundary();
        bdary.get(city, function(rs){       //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0, strokeStyle: 'dashed', strokeOpacity: '0', fillOpacity: '0.5', fillColor: 'red', strokeColor: "yellow"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }    
        });   
    }


    var isChina = 1;
    var mapStyle = ['normal', 'light', 'dark', 'redalert', 'googlelite', 'grassgreen', 'midnight', 'pink', 'darkgreen', 'bluish', 'grayscale', 'hardedge'];
    $('#switchMap').bind('click', function() {
        isChina++;
        //if (isChina > 4) {
        if (isChina > 16) {
            isChina = 1;
        }
        if (isChina == 1) {
            setNullStyle();
            chinaLayer.show();
        } else if (isChina == 2) {
            setSubwayStyle();
            chinaLayer.hide();
        } else if (isChina == 3) {
            setDarkBlueStyle();
            chinaLayer.hide();
        } else if (isChina == 4) {
            setGrayStyle();
            chinaLayer.hide();
        } else {
            console.log(11);
            setDarkStyle();
            chinaLayer.hide();
        }
        if (isChina > 4) {
            map.setMapStyle({
                style: mapStyle[isChina - 5]
            });
        }
    });

    map.addEventListener('zoomend', showZoom);

    function showZoom() {
        $('#zoom').html(map.getZoom());
    }

    showZoom();

    </script>
	
</body>
</html>
